<template>
	<G__TopNav/>
	<h1>{{ msg }}</h1>
	<div class="hehe">
		<div class="hehe__x">
			{{ num }}
		</div>

		<div>{{ $store.state.moduleA.x }}</div>
		<div>getX1:{{ $store.getters['moduleA/getX'] }}</div>
		<div>getX2:{{ getX }}</div>
		<div>x:{{ x }}</div>
		<div>storeX:{{ storeX }}</div>
		<a @click="onChange">change</a>
		<!--<div>{{ getX }}</div>-->
	</div>

</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { mapGetters, mapMutations, mapState, useStore } from "vuex";
import { ipcRenderer } from "electron";
import G__TopNav from "@/components/TopNav.vue";

export default defineComponent({
	name: 'TEST__Hello',
	components: {G__TopNav},
	props: {
		msg: {
			type: Number,
			default: 1
		},
	},
	data() {
		return {
			num: 1234567
		}
	},
	computed: {
		...mapState({
			x: (state: any) => state.moduleA.x,
		}),

		...mapGetters('moduleA', ['getX'])
	},

	methods: {
		...mapMutations('moduleA', ['setX']),
		onChange() {
			this.setX(Math.random());
		}
	},

	mounted() {
		console.log(123)
	},

	created() {
		ipcRenderer.on('msg', (e, command) => {
			console.group('msg');
			console.log('ipcRenderer')
			console.log('command', command)
			console.groupEnd();
		})
	},

	setup() {
		// 组合是API中使用store
		const store = useStore()

		const storeX = computed(() => store.state.moduleA.x)

		return {
			storeX
		}
	}
})
</script>
<style scoped lang="less">
a {
	color: #42b983;
}

label {
	margin: 0 0.5em;
	font-weight: bold;
}

code {
	background-color: #eee;
	padding: 2px 4px;
	border-radius: 4px;
	color: #304455;
}

.hehe {
	&__x {
		color: green;
		font-size: 44px;
	}
}
</style>
